import React, { useEffect, useState } from 'react';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import { Avatar, Card } from 'antd';
import styles from './card.module.css';
const actions = [
  <EditOutlined key="edit" />,
  <SettingOutlined key="setting" />,
  <EllipsisOutlined key="ellipsis" />,
];
const CardNormal = ({data}) => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    if (!data) {
        setLoading(true);
    } else {
        console.log('GOT_data here: --> ', data);
        setTimeout(() => {
            setLoading(false);
        }, 300);
    }
  }, [data]);

  return (
    <div style={{display: 'inline-block', width: '250px'}}>
      <Card loading={loading} actions={actions} className={styles.card}>
        <Card.Meta
          avatar={<Avatar src={data.avatar} />} // data.avatar --> mock: "https://api.dicebear.com/7.x/miniavs/svg?seed=1"
          title={data.title}
          style={{bottom: '10px'}}
          description={
              <p style={{wordBreak:'break-all'}}>{data.message}</p>
          }
        />
      </Card>
    </div>
  );
};

export default CardNormal;

